<template>
	<view
	class="coupon-card bg-white flex-center"
	>
		<view class="coupon-card-left clear-flex u-text-center">
			<view class="flex-center-center">
				<view class="flex-baseline font-bold color-red">
					<view class="u-f-32 u-lh-38">{{ lang_unit.money }}</view>
					<view class="u-f-66 u-lh-38">{{ item.val || item.couponVal || 0 }}</view>
				</view>
			</view>

			<view class="u-f-26 u-lh-36" style="color: #696969;">{{ lang_goods.useOver[0] }}{{ item.max || item.couponMax || 0 }}{{ lang_goods.useOver[1] }}</view>
			
			<view class="u-p-t-8 u-f-28 u-lh-40 font-medio">
				{{ typeof item.merchantId === 'number' ? lang_goods.goodsType_shopcoupon : lang_goods.goodsType_coupon }}
			</view>
		</view>
		
		<view class="flex-center-between" style="width: 100%;">
			<view class="u-p-t-10">
				<view class="u-f-32 u-lh-44 font-medio">{{ item.title || '' }}</view>
				<view class="u-f-20 u-lh-28 color-grew">
					<view>{{ (item.byMerchantId ? item.byMerchantName : item.merchantName) || '' }}</view>
					<view>{{ lang_goods.coupon_buyTime }}: {{ item.createTime  || '' }}</view>
					<view>{{ lang_goods.coupon_endTime }}: {{ item.endTime || '' }}</view>
					<view v-if="item.byMerchantId">{{ lang_goods.coupon_wirteTime }}: {{ item.useTime  || '' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderInfo } from '@/api/user/order.js'
	export default {
		props: {
			item: {
				default: () => ({})
			},
			disabled: {
				default: false
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon {
		&-card {
			padding: 20rpx;
			
			&-left {
				margin-right: 22rpx;
				width: 198rpx;
				border-right: 2rpx dashed #E3E3E3;
			}
		}
	}
</style>
